실제 브라우저에서 react가 랜더링되는 초기과정
React가 언제 실행되는지 제대로 이해하려면, 먼저 브라우저가 HTML/CSS/JS를 어떻게 처리하는지를 알아야한다.
✅ 브라우저 렌더링 과정 요약
- HTML 파싱 → DOM Tree 생성 HTML을 위에서부터 한 줄씩 파싱하며 DOM(Document Object Model) 트리를 생성
div, p 같은 태그들이 각각의 노드가 되어 트리 구조로 변환
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>My React App</title>
</head>
<body>
<div id="root"></div>
<script src="/bundle.js"></script> <!-- React 코드 번들 -->
</body>
</html>
<div id="root"></div # React가 렌더링될 진입 지점 (root DOM 노드)
<script src="/bundle.js"> # Webpack/Vite 같은 빌드 툴로 번들된 React 앱 JavaScript
이때 display: none 요소는 제외됨.
- CSS 파싱 → CSSOM 생성
style 또는 link 태그로 불러온 CSS를 파싱해 CSSOM(CSS Object Model) 트리를 생성합니다. CSSOM은 각 DOM 요소에 어떤 스타일이 적용되는지를 계산할 수 있도록 하는 구조이다.
- DOM + CSSOM → Render Tree 생성 DOM 요소 중 화면에 렌더링되는 요소만 선별해 Render Tree를 생성한다.
예: display: none 요소는 제외됨.
각 요소가 어떤 스타일을 갖고 있는지도 함께 포함됨.
- Layout (Reflow) Render Tree의 각 노드가 화면에서 어디에 위치할지 계산하는 단계
위치, 크기, 정렬 등을 계산하여 좌표를 확정
- Painting Layout 정보에 따라 픽셀로 색상, 텍스트, 이미지 등을 화면에 그림.
이 때 실제로 사용자의 화면에 보이게 됨.
- Composite (합성) 여러 레이어로 나뉘어진 그래픽 요소들을 GPU를 통해 최종적으로 합성하여 보여줌.
애니메이션, transform 등이 있으면 별도 레이어로 분리되기도 함.
그럼 JS는 언제 실행될까?
HTML 파싱 중
이 구조 때문에 JavaScript는 렌더링 흐름을 차단할 수 있는 요소야. 그래서 성능을 고려하면 <script defer>나 <script async>를 쓰는 게 좋아.
그럼 React는 언제 실행될까?
앞서 말했듯, React도 결국 JavaScript야. 우리가 흔히 작성하는 구조를 보면:
<body>
<div id="root"></div>
<script src="/bundle.js"></script>
</body>
여기서 #root는 React가 렌더링될 DOM이고, /bundle.js는 React 코드가 들어 있는 파일이야. 브라우저는 이걸 만나면 JS를 실행하고, 그때부터 React가 동작하기 시작해.
React는 이렇게 동작해
-
React는 ReactDOM.createRoot(document.getElementById('root')) 같은 코드로 시작돼.
-
내부적으로 Virtual DOM을 만들고
-
Virtual DOM을 진짜 DOM으로 바꿔서 #root 안에 집어넣어
-
그 다음 브라우저는 DOM + CSSOM을 바탕으로 Render Tree를 만들고 화면에 렌더링
즉, Render Tree가 만들어지기 전에 React가 실행되어서 실제 DOM을 먼저 만들어줘야 해. React가 실행되지 않으면 #root는 비어있기 때문에 브라우저는 아무것도 보여줄 수 없어.
마무리 요약 ✨
정리하면,
-
브라우저는 HTML을 파싱하다가 script 를 만나면 JS를 실행해
-
React는 이 JS 실행 시점에 Virtual DOM을 만들고 실제 DOM으로 바꿔서 삽입함
-
그 후에야 브라우저가 DOM + CSSOM을 바탕으로 Render Tree를 만들고 화면에 렌더링함
그래서 React의 초기 렌더링을 제대로 이해하려면, 브라우저의 렌더링 흐름과 JS 실행 타이밍을 같이 이해해야 돼.
ksc036
안녕하세요 개발을 좋아하는 풀스택 개발자입니다.
0개의 댓글